<script>
import { getMergeInside,getColumnWidth,getRowHeight,numberToExcelColumn } from './utils.js';
import JTableCell from './JTableCell.vue'
export default {
    props:{
        helper:{
            type: Object,
            required: true
        },
        rows:{
            type: Array,
            default: () => []
        },
        cols:{
            type: Array,
            default: () => []
        },
        merges:{
            type: Array,
            default: () => []
        },
    },
    render(h){
        return h( 'table',{
            class:'jtable-body',
        },[
            h('tr',
            this.cols.map( (col,index) =>{ return h('td',{
                style: {
                    width: col.width,
                }
            }) })),
            this.rows.map((row,rowIndex) => {
                return h('tr',{
                    style: {
                        height: row.height,
                    }
                },this.cols.map((col,colIndex)=>{
                    const merge = getMergeInside(rowIndex,colIndex,this.merges);
                    const has =  merge == null || (merge.startRow == rowIndex && merge.startCol == colIndex );
                    if(!has){
                        return null;
                    }
                    if(row.rowDef == null || row.cells[colIndex+'']==undefined)
                    {
                        return h('td')
                    }
                    const cell = row.cells[colIndex+''];
                    if(!cell.tag)
                    {
                        cell.tag = {}
                    }
                    if(!cell.tag.cellType)
                    {
                        cell.tag.cellType = JTableCell
                    }
                    const component = cell.tag.cellType;
                    return h(component,{
                        attrs:{
                            colspan: (merge && merge.startRow== rowIndex && merge.startCol == colIndex ) ? merge.endCol - merge.startCol + 1 : null,
                            rowspan: (merge && merge.startRow== rowIndex && merge.startCol == colIndex ) ? merge.endRow - merge.startRow + 1 : null,
                        },
                        props:{
                            helper:this.helper,
                            cell:cell
                        },
                        style: {
                            width: this.cols[colIndex].width,
                        }
                    },);
                })); // Filter out null cells
            })
        ])  
    }
}
</script>

<style scoped>
.jtable-body{
    box-sizing: 'border-box';
    /* width:'fit-content'; */
}
table{
    margin:0;
    padding:0;
    border:none;
    border-collapse: collapse;
    overflow: hidden;
    table-layout: fixed
}
td{
    padding:0;
    margin:0;
}
</style>